<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
#div1, #div2 {
    height: 200px;
    width: 200px;
    border: 1px solid black;
}
#div2 {
    text-align: center;
}
div:before {
    content: "Test";
}
</style>
<div id="div1" contenteditable="true"></div>
<div id="div2" contenteditable="true"></div>
<script>
test (function() {
    var div1 = document.getElementById('div1');
    div1.focus();
    var caretRect1 = internals.absoluteCaretBounds(document);

    var div2 = document.getElementById('div2');
    div2.focus();
    var caretRect2 = internals.absoluteCaretBounds(document);

    assert_not_equals(caretRect1.left, caretRect2.left);
}, "Tests if the cursor respects text align property in emtpy div having pseudo content");
</script>
